vue

<template>
    <div class="tag-list-container">
        <el-card shadow="hover" header="标签列表" class="tag-card">
            <div class="tag-wrapper">
                <el-tag v-for="(tag, idx) in tagList" :key="idx" type="info" size="medium"
                    @click="handleTagClick(tag.id, tag.name)" style="cursor: pointer;">
                    {{ tag.name }}
                </el-tag>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'TagList',
    data() {
        return {
            tagList: [],
            articleList: []
        };
    },
    created() {
        this.getTagList();
    },
    methods: {
        async getTagList() {
            const res = await this.$axios.post('http://47.104.167.34:9110/api/tag/list');
            if (res.data.success) {
                this.tagList = res.data.data;
                console.log(this.tagList);
                
            } else {
                this.$message.error(`获取标签失败：${res.data.message || '未知错误'}`);
            }
        },
        async handleTagClick(tagId) {
            console.log(tagId);
            
            this.$router.push({
                name: 'taglist',
                query: { tagId: tagId }
            });

        },
    }
};
</script>

<style scoped>
.el-tag {
    padding: 2px;
}

.tag-list-container {
    padding: 20px;
}

.tag-card {
    max-width: 1200px;
    margin: 0 auto;
}

.tag-wrapper {
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
</style>